<template>
  <div>
    <!-- 中间内容 -->
    <div class="data-main">
      <div class="main-second">
        <div
          class="main-bg"
          v-for="(item, index) in pointMain"
          :key="index"
          @click="choosePoint(index)"
          :class="{ pointBg: isPoint == index }"
        >
          <a href="#">{{ item.name }}</a>
        </div>
      </div>
    </div>

    <!-- 积分统计 -->
    <div class="point-all">
      <!-- 积分统计左边内容 -->
      <div class="point-left">
        <p>
          <span>积分统计</span>
        </p>
        <div class="point-list">
          <div
            v-for="(item, index) in groupingPoint"
            :key="index"
            :class="{ countBg: countPoint === index }"
            @click="chooseBg(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- 积分统计右边内容 -->
      <div class="point-right">
        <div class="point-top">
          <el-select v-model="value" clearable placeholder="请选择分组">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-time-select
            v-model="valueone"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </div>
        <div class="form-list">
          <table>
            <tr class="form-top">
              <td>分组</td>
              <td>总积分</td>
            </tr>
            <tr>
              <td>分组1</td>
              <td></td>
            </tr>
            <tr>
              <td>分组2</td>
              <td></td>
            </tr>
            <tr>
              <td>分组3</td>
              <td></td>
            </tr>
            <tr>
              <td>分组4</td>
              <td></td>
            </tr>
            <tr>
              <td>分组5</td>
              <td></td>
            </tr>
          </table>
        </div>
        <!-- 分页 -->
        <div class="page">
          <div class="page-num">
            <span>共15条</span>
          </div>

          <div class="page-select">
            <el-select v-model="value" clearable placeholder="5条/页">
              <el-option
                v-for="item in pageNums"
                :key="item.Numones"
                :label="item.numBers"
                :value="item.Numones"
              >
              </el-option>
            </el-select>
          </div>
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
          <!-- <div class="go-page">
            <span>跳转</span>
            <input type="text" />
            <span>页</span>
          </div> -->
        </div>
      </div>

      <!-- 按人员统计 -->
      <div class="point-right" v-show="rightContent === 1">
        <!-- <h2>按人员统计内容</h2> -->
        <div class="point-top">
          <input
            type="text"
            class="point-input"
            placeholder="请输入内容用户名、姓名搜索"
          />
          <el-time-select
            v-model="valueone"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </div>
        <div class="form-list">
          <table>
            <tr class="form-top">
              <td>姓名</td>
              <td>用户名</td>
              <td>所属分组</td>
              <td>总积分</td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>李四</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>李四</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
        <!-- 分页 -->
        <div class="page">
          <div class="page-num">
            <span>共15条</span>
          </div>

          <div class="page-select">
            <el-select v-model="value" clearable placeholder="5条/页">
              <el-option
                v-for="item in pageNums"
                :key="item.Numones"
                :label="item.numBers"
                :value="item.Numones"
              >
              </el-option>
            </el-select>
          </div>
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
          <!-- <div class="go-page">
            <span>跳转</span>
            <input type="text" />
            <span>页</span>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 积分变动记录 -->

    <div class="point-all">
      <!-- 积分统计左边内容 -->

      <!-- 积分统计右边内容 -->
      <div class="point-right">
        <div class="point-top">
          <input
            type="text"
            class="point-input"
            placeholder="请输入内容用户名、姓名搜索"
          />
          <el-time-select
            v-model="valueone"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="form-list">
          <table>
            <tr class="form-top">
              <td>用户名</td>
              <td>姓名</td>
              <td>原本积分</td>
              <td>变动</td>
              <td>变动原因</td>
              <td>当前积分</td>
              <td>时间</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>张三</td>
              <td>100</td>
              <td>+10</td>
              <td>上传素材</td>
              <td>110</td>
              <td>2021-8-9 09:47:29</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>张三</td>
              <td>90</td>
              <td>+10</td>
              <td>上传素材</td>
              <td>100</td>
              <td>2021-8-9 09:47:29</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>张三</td>
              <td>100</td>
              <td>-10</td>
              <td>下载素材</td>
              <td>90</td>
              <td>2021-8-9 09:47:29</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>张三</td>
              <td>90</td>
              <td>+10</td>
              <td>上传素材</td>
              <td>100</td>
              <td>2021-8-9 09:47:29</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>张三</td>
              <td>100</td>
              <td>-10</td>
              <td>下载素材</td>
              <td>90</td>
              <td>2021-8-9 09:47:29</td>
            </tr>
          </table>
        </div>
        <!-- 分页 -->
        <div class="page">
          <div class="page-num">
            <span>共15条</span>
          </div>

          <div class="page-select">
            <el-select v-model="value" clearable placeholder="5条/页">
              <el-option
                v-for="item in pageNums"
                :key="item.Numones"
                :label="item.numBers"
                :value="item.Numones"
              >
              </el-option>
            </el-select>
          </div>
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
          <!-- <div class="go-page">
            <span>跳转</span>
            <input type="text" />
            <span>页</span>
          </div> -->
        </div>
      </div>

      <!-- 按人员统计 -->
      <div class="point-right" v-show="rightContent === 1">
        <!-- <h2>按人员统计内容</h2> -->
        <div class="point-top">
          <input
            type="text"
            class="point-input"
            placeholder="请输入内容用户名、姓名搜索"
          />
          <el-time-select
            v-model="valueone"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </div>
        <div class="form-list">
          <table>
            <tr class="form-top">
              <td>姓名</td>
              <td>用户名</td>
              <td>所属分组</td>
              <td>总积分</td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>李四</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>李四</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
        <!-- 分页 -->
        <div class="page">
          <div class="page-num">
            <span>共15条</span>
          </div>

          <div class="page-select">
            <el-select v-model="value" clearable placeholder="5条/页">
              <el-option
                v-for="item in pageNums"
                :key="item.Numones"
                :label="item.numBers"
                :value="item.Numones"
              >
              </el-option>
            </el-select>
          </div>
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
          <!-- <div class="go-page">
            <span>跳转</span>
            <input type="text" />
            <span>页</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { admincategorypage } from "@/api/index";
export default {
  data() {
    return {
      navList: [
        {
          id: "1",
          name: "首页",
        },
        {
          id: "2",
          name: "视频管理",
        },
        {
          id: "3",
          name: "用户管理",
        },
        {
          id: "4",
          name: "数据统计",
        },
        {
          id: "5",
          name: "系统设置",
        },
      ],
      //   积分统计
      pointMain: [
        {
          name: "积分统计",
        },
        {
          name: "积分变动记录",
        },
      ],
      //   分组统计
      groupingPoint: [
        {
          name: "按分组统计",
        },
        {
          name: "按人员统计",
        },
      ],

      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      //   分页
      pageNums: [
        {
          Numones: "5条/页",
          numBers: "5条/页",
        },
      ],

      input: "",
      value: "",
      // 时间选择器
      valueone: "",
      countPoint: 0,
      isPoint: 0,
      rightContent: 0,
      pointAll: 0,
    };
  },
  methods: {
    admincategorypage() {
      admincategorypage({
        name: this.name,
        pageNo: this.pageNo,
        pageSize,
      }).then((res) => {
        console.log(res);
      });
    },
    choosePage(id) {
      //   if (id === "2") {
      //     this.$router.push({
      //       path: "/videolist",
      //     });
      //   }
    },

    choosePoint(index) {
      this.isPoint = index;
      this.pointAll = index;
      console.log(this.isPoint);
    },
    chooseBg(index) {
      this.countPoint = index;
      this.rightContent = index;
    },
  },

  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>


<style lang="scss">
// 积分统计
.data-main {
  width: 100%;
  margin-top: 25px;
  min-width: 1200px;

  margin-bottom: 20px;
}

.main-second {
  width: 1378px;
  height: 52px;

  margin: 0 auto;
  display: flex;
  padding-left: 45px;
  padding-bottom: 5px;
  min-width: 1200px;
  background-color: white;
}
.main-second > div {
  width: 120px;
  // margin-right: 10px;

  height: 30px;
  margin-top: 12px;
  border-color: #aaaaaa;
  box-sizing: border-box;

  border: 1px solid #aaaaaa;
  text-align: center;
}
.main-second > div a {
  text-decoration: none;
  font-size: 13px;

  margin-top: 5px;
  color: #333333;
  display: inline-block;
}
.main-bg {
  padding-left: 10px;
}
.pointBg {
  background-color: #aaaaaa;
}
.pointBg a {
  color: white !important;
}

// 积分统计
.point-all {
  width: 1425px;
  height: 697px;

  margin: 0 auto;
  display: flex;

  min-width: 1200px;
  background-color: white;
}
.point-left {
  width: 267px;
  margin-top: 15px;
  p {
    margin-left: 20px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
}
.point-list {
  width: 267px;
  margin-top: 20px;
  height: 613px;
  border-right: 1px solid #f2f2f2;
  text-align: center;
}
.point-list > div {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  color: #7f7f7f;
  margin-bottom: 15px;
}
.point-list .countBg {
  color: #000000;
  font-weight: bold;
  background-color: #f2f2f2;
}

.point-right {
  width: 1000px;
  margin: 0 auto;
  padding-top: 40px;
}
.point-top {
  width: 900px;
  .point-input {
    width: 227px;
    outline: none;
    margin-right: 20px;
    padding-left: 14px;
    border-radius: 3px;
    height: 40px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.el-select {
  margin-right: 26px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-right: 26px;
}
.el-button--primary {
  margin-right: 15px;
}

.form-list {
  width: 982px;
  margin-top: 35px;
  // border: 1px solid red;
  // border-right:1px solid red;
}
table {
  border: 1px solid #ebebeb;
  width: 982px;
  text-align: center;
}
.form-top {
  background-color: rgb(242, 242, 242);
}
tr {
  border: 1px solid #ebebeb;
}
td {
  font-size: 13px;
  color: #333333;
  height: 30px;
  //  padding-top: 5px;
  line-height: 30px;
  //     border-top:  1px solid red;
  border: 1px solid #ebebeb;
}

// 分页
.page {
  width: 853px;
  margin-bottom: 40px;
  display: flex;
  margin-left: 15px;
  justify-content: flex-start;
  margin-top: 40px;
}
.page-num {
  width: 100px;
  // margin-right: 15px;
}
span {
  font-size: 14px;
}
.page-select {
  margin-right: 15px;
  width: 156px;

  input {
    height: 21px;
  }
}

.go-page {
  width: 500px;
  margin-top: 5px;
  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }
}

.el-input__icon {
  line-height: 21px !important;
}

.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}
</style>